<script>
import { defineComponent, PropType, h } from 'vue'
import { Pane } from './Index.vue'
export default defineComponent({
  name: 'tab-nav',
  props: {
    panes: {
      type: Array,
      default: () => []
    },
    currentName: {
      type: String,
      default: ''
    },
    labelSize: {
      type: Number
    },
    isAbsolute: {
      type: Boolean
    },
    isScale: {
      type: Boolean
    },
    onTabClick: {
      type: Function,
      default: () => {}
    }
  },
  render () {
    const {
      panes,
      currentName,
      labelSize,
      isAbsolute,
      isScale,
      onTabClick
    } = this
    const tabs = panes.map((pane) => {
      const tabLabel = pane.props.label
      const tabName = pane.props.name
      const isActive = currentName === tabName
      return h(
        'li',
        {
          class: [
            'tabs-nav-item',
            isActive ? 'active' : '',
            isScale ? 'scale' : ''
          ],
          style: { fontSize: `${labelSize}px` },
          onClick: (ev) => {
            onTabClick(pane, tabName, ev)
          }
        }, [
          tabLabel
        ]
      )
    })
    return h(
      'ul',
      {
        class: ['tabs-nav', isAbsolute ? 'absolute' : '']
      },
      [
        tabs
      ]
    )
  }
})
</script>
